<template lang="html">
 <div class="main">
   <panel title="近5年各类国家图形分析报表 /" class="panel">
     <router-link slot="left" style="font-size: 16px;color: #000; font-family: 新宋体;"  :to="{ path: '/warn/yearVisit'}">年度出访总汇</router-link>
     <div slot="right">
       <router-link style="font-size: 16px;color: #000; font-family: 新宋体;"  :to="{ path: '/warn/table'}">表格分析</router-link>
     </div>
     <div class="body">
         <div class="map" id="hn_country_chart">
           wowoowo
         </div>
     </div>
   </panel>
 </div>
</template>

<script>
import panel from '@/components/panel.vue';
export default {
  data () {
    return {
      loading: false,
      chart: null
    };
  },
  components: {
    panel
  },
  watch: {
  },
  methods: {
    draw (data) {
      let chart = this.chart;
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter (d) {
            let result = [];
            result.push(d[0].axisValue, '<br/>');
            result.push('<div style="text-align: left">');
            d.forEach(i => {
              if (i.data > 0) {
                result.push(i.marker, i.seriesName, i.data, '<br/>');
              }
            });
            result.push('</div>');
            return result.join('');
          }
        },
        calculable: true,
        legend: {
          data: ['一带一路', '周边国家', '欧美国家', '非洲国家']
        },
        color: ['#4196BB', '#42A851', '#C8AA3E', '#B83763'],
        xAxis: [
          {
            type: 'category',
            data: data.map(d => d.year)
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '', // y
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '一带一路',
            type: 'bar',
            data: data.map(d => {
              return d.data.find(dd => dd.name === '一带一路').value;
            })
          }, {
            name: '周边国家',
            type: 'bar',
            data: data.map(d => {
              return d.data.find(dd => dd.name === '周边国家').value;
            })
          }, {
            name: '欧美国家',
            type: 'bar',
            data: data.map(d => {
              return d.data.find(dd => dd.name === '欧美国家').value;
            })
          }, {
            name: '非洲国家',
            type: 'bar',
            data: data.map(d => {
              return d.data.find(dd => dd.name === '非洲国家').value;
            })
          }
        ]
      };
      chart.setOption(option);
      chart.on('click', (param) => {
        console.log('xxxxxx', param.seriesName);
        this.$router.push('/warn/country/' + param.seriesName);
      });
    },
    loadData () {
      //
      let data = [
        {
          year: '2018',
          data: [
            {
              name: '一带一路',
              value: '2000'
            }, {
              name: '周边国家',
              value: '1000'
            }, {
              name: '欧美国家',
              value: '1600'
            }, {
              name: '非洲国家',
              value: '600'
            }
          ]
        }, {
          year: '2017',
          data: [
            {
              name: '一带一路',
              value: '2000'
            }, {
              name: '周边国家',
              value: '1000'
            }, {
              name: '欧美国家',
              value: '1600'
            }, {
              name: '非洲国家',
              value: '600'
            }
          ]
        }, {
          year: '2016',
          data: [
            {
              name: '一带一路',
              value: '2000'
            }, {
              name: '周边国家',
              value: '1000'
            }, {
              name: '欧美国家',
              value: '1600'
            }, {
              name: '非洲国家',
              value: '600'
            }
          ]
        }, {
          year: '2015',
          data: [
            {
              name: '一带一路',
              value: '2000'
            }, {
              name: '周边国家',
              value: '1000'
            }, {
              name: '欧美国家',
              value: '1600'
            }, {
              name: '非洲国家',
              value: '600'
            }
          ]
        }, {
          year: '2014',
          data: [
            {
              name: '一带一路',
              value: '2000'
            }, {
              name: '周边国家',
              value: '1000'
            }, {
              name: '欧美国家',
              value: '1600'
            }, {
              name: '非洲国家',
              value: '600'
            }
          ]
        }
      ];
      // 画图
      this.draw(data);
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.chart = this.$echarts.init(document.getElementById('hn_country_chart'));
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
      this.loading = true;
      this.loadData();
    });
  }
};
</script>

<style lang="css" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  .panel {
    height: 100%;
    width: 100%;
    position: relative;
   .body {
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     padding-left: 10px;
     .map {
       padding-top: 15px;
       height: 100%;
       width: 100%;
     }
   }
  }
}

</style>
